@{
    ViewBag.Title = "JSON在线代码高亮着色工具";
    ViewBag.keywords = "JSON在线代码高亮着色工具";
    var host = Appsettings.app("BaseFile:HostUrl");
    ViewBag.description = "在线JSON在线代码高亮着色工具";
}
@section Styles{<style>.CodeContainer{border:1px solid #ccc;padding:10px;}.PropertyName{color:red;}</style>}
<div class="layui-row layui-form layui-form-pane JsonColor">
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">内容：</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入JSON字符串" id="content" name="content" rows="8" lay-verify="required" autocomplete="off" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <input type="checkbox" name="enableU2C" id="enableU2C" value="unicode转中文" title="unicode转中文" checked="">
    </div>
    <div class="layui-form-item">
        <a class="layui-btn layui-btn-sm layui-btn-normal proc">着色</a>
        <a class="layui-btn layui-btn-sm layui-btn-primary dem">DEMO</a>
        <a class="layui-btn layui-btn-sm layui-btn-danger clear">清空</a>
    </div>
    <div class="layui-form-item layui-form-text">
        <div class="layui-input-block">
            <div id="Canvas"></div>
        </div>
    </div>
</div>
@section Scripts{
<script type="text/javascript">
     layui.config({ base: '@host/js/' }).use('common',function(){  $=layui.jquery;var JsonColor=layui.JsonColor;let area_input = document.getElementById('content');let area_output = document.getElementById('outtxt');
    $(".JsonColor .proc").bind("click", function () {
        var checked = $("#enableU2C").is(':checked');
        var canvas = document.getElementById("Canvas");
        JsonColor.Process(area_input, checked, canvas);
    });
    $(".JsonColor .dem").bind("click", function () {
        area_input.value = '{"a":"11","b":"12",}';
    });
    $(".JsonColor .clear").bind("click", function () {
        area_input.value = '';
        document.getElementById("Canvas").innerHTML = "";
    });
    });
</script>
}
